<template>
	<gui-page :fullPage="true" :apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gBody>
			<view class="header" id="header">
				<gui-a-header title="通知反馈"></gui-a-header>
				<view class="nav">
					<gui-switch-navigation :items="tabs" :width="650" :size="162" :titleClass="['c666']"
						:titleActiveClass="['colorBlue','gui-bold']" activeDirection="center" activeLineWidth="65rpx"
						textAlign="center" :currentIndex="currentIndex" @change="navchange"></gui-switch-navigation>
				</view>
			</view>
			<swiper :current="currentIndex" :style="{height:mainHeight+'px', width:'750rpx'}" @change="swiperChange">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, dataIndex) in dataList" :key="dataIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view class="bgfff" :style="{height:mainHeight+'px'}" :scroll-y="true"
						@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
						@scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<view class="post-list">
							<gui-empty v-if="items.length <= 0">
								<template v-slot:img>
									<view class="gui-flex gui-row gui-justify-content-center">
										<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
											mode="widthFix">
										</image>
									</view>
								</template>
								<template v-slot:text>
									<text
										class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
								</template>
							</gui-empty>
							<view class="item" v-if="items != null" v-for="(item, itemIndex) in items" :key="itemIndex">
								<view class="flex-ac-jb">
									<text class="title">{{item.postName}}</text>
									<text class="pay f24 colorRed">{{item.postMoney}}</text>
								</view>
								<view class="info flex-ac f22">
									<text>{{item.addressInfo}} {{item.work}} {{item.education}} 招{{item.recruitNum}}人</text>
								</view>
								<view class="flex-ac-row f18" v-if="item.comUsertConpanyInfo.welfareTreatment">
									<view class="post-label c999"
										v-for="(wItem,wIndex) in item.comUsertConpanyInfo.welfareTreatment.split(',')" :key="wIndex">{{wItem}}
									</view>
								</view>
								<view class="company flex-ac-jb">
									<view class="left flex-ac">
										<image class="qiye-icon" src="../../static/index/qiye.png" mode="widthFix"
											style="height: auto;"></image>
										<text class="c666 f24">{{item.comUsertConpanyInfo.companyName}}</text>
									</view>
									<text class="colorBlue f24" v-if="item.notRefuse == 2">已投递，等待反馈</text>
									<text class="colorSuccess f24" v-if="item.notRefuse == 0">企业有意向</text>
									<text class="c999 f24" v-if="item.notRefuse == 1">已拒绝</text>
								</view>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>

		</template>
	</gui-page>
</template>

<script setup>
	import {
		myUserPostInfoListByNotRefuse
	} from '@/api/user.js'
	import graceJS from "@/Grace6/js/grace.js"
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const $u = reactive(inject('$u'))
	const tabs = ref([])
	const loadmorecom = ref([])
	const refreshcom = ref([])
	// 查询条件
	const query = ref({
		notRefuse: ''
	})
	const pageLoading = ref(false)
	const currentIndex = ref(0)
	const mainHeight = ref(200)
	const dataList = ref([])
	const pages = ref([])
	const pageSize = 10;
	const scrollTops = ref([]) 
	const scrollTimer = ref(null)
	const loadMoreTimer = ref(null)
	const apiLoadStatus = ref([]) 
	const guipage = ref(null)
	const tabHeight = ref(0)
	const tranningTabHeight = ref(0)

	onLoad(() => {
		graceJS.getRefs(guipage, 0, (ref) => {
			ref.getDomSize('guiPageBody', (e) => {
				graceJS.select('#header', (e2) => {
					mainHeight.value = e.height - e2.height;
				})
			});
		});
		setTimeout(() => {
			tabs.value = [{
				id: '',
				name: '全部'
			}, {
				id: 2,
				name: '等待反馈'
			}, {
				id: 0,
				name: '有意向'
			}, {
				id: 1,
				name: '已拒绝'
			}];
			for (var i = 0; i < tabs.value.length; i++) {
				dataList.value.push([]);
				pages.value.push(1);
				scrollTops.value.push(0);
				apiLoadStatus.value.push(false);
			}
			loadData();
		}, 500);

	})

	const navchange = (e) => {
		currentIndex.value = e;
	}

	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		let tabsData = Object.assign(tabs.value, {})
		query.value.notRefuse = tabsData[e.detail.current].id
		loadCom();
	}
	const loadCom = () => {
		if (!dataList.value[currentIndex.value]) {
			return;
		}
		if (dataList.value[currentIndex.value].length < 1) {
			loadData();
		}
	}
	const scroll = (e) => {
		if (scrollTimer.value != null) {
			clearTimeout(scrollTimer.value);
		}
		scrollTimer.value = setTimeout(() => {
			scrollTops.value.splice(currentIndex.value, 1, e.detail.scrollTop);
		}, 100);
	}
	const touchstart = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchstart(e);
	}

	const touchmove = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchmove(e);
	}
	const touchend = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchend(e);
	}
	const reload = () => {
		pages.value[currentIndex.value] = 1;
		loadmorecom.value[currentIndex.value].stoploadmore();
		loadData(1);
	}
	const loadmorefun = () => {
		let currentIndexVal = currentIndex.value;
		if (apiLoadStatus.value[currentIndexVal]) {
			return;
		}
		if (loadmorecom.value[currentIndexVal].loadMoreStatus != 0) {
			return;
		}
		if (loadMoreTimer.value != null) {
			clearTimeout(loadMoreTimer.value);
		}
		loadMoreTimer.value = setTimeout(() => {
			loadmorecom.value[currentIndexVal].loading();
			loadData();
		}, 80);
	}

	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		let currentValue = currentIndex.value;
		myUserPostInfoListByNotRefuse({
			pageNum: pages.value[currentValue],
			pageSize,
			...queryParam
		}).then(res => {
			if (res.code == 200) {
				let total = Math.ceil(res.total / pageSize);
				if (pages.value[currentValue] == 1) {
					dataList.value.splice(currentValue, 1, res.rows);
				} else {
					dataList.value[currentValue] = dataList.value[currentValue].concat(res.rows);
					loadmorecom.value[currentValue].stoploadmore();
					if (pages.value[currentValue] >= total) {
						loadmorecom.value[currentValue].nomore();
					}
				}
			}
			if (isReload) {
				refreshcom.value[currentValue].endReload();
			}
			if (res.rows.length > 0) {
				pages.value[currentValue]++;
			}
			apiLoadStatus.value.splice(currentValue, 1, false);
			pageLoading.value = false;
		})
	}
</script>

<style lang="scss">
	.nav {
		padding: 10rpx 50rpx;
	}

	.post-list {
		padding: 0 38rpx 0 44rpx;
	}
</style>